JavaScript Array Iteration Methods

In the last tutorial, we discussed JavaScript array sorting methods and find the minimum and maximum values from an array. In this tutorial, we will learn about different array techniques and methods to iterate over every array item. JavaScript Array Iteration Methods

Array forEach() method

The forEach() mehod is used to call a function on every element or value of the array. And it returns nothing it just call the function for every array value.

Syntax 

array.forEach(function_name)
Example 
<script>
    let prices =[12, 32, 10, 55, 100, 102]; 
    var taxes = []
    prices.forEach(add_tax);  //call add_tax function for every prices value
    function add_tax(value, index, array)
    {
        value += value*0.07;
        taxes.push(value)
    }
    console.log("prices: "+prices);
    console.log("taxes: "+taxes);
</script>

Output 

prices: 12,32,10,55,100,102
taxes: 12.84,34.24,10.7,58.85,107,109.14

Behind the code

In the above example the prices.forEach(add_tax); statement call the add_tax() function for every prices value. In the add_tax(value, index, array) function we defined 3 parameters

  • value
  • index
  • array

The value represent the individual array value. The index represent the index number of the value. The array represent the complete array itself. And all these three values get automatically assigned when we call the forEach() method on an array.

Array map() method

The map() method is similar to the forEach() method the only difference is the map() method returns the array so the function that map() method is supposed to call for every array element must have a return statement.

syntax 

new_array = array_name.map(function_name)

Example 

<script>
    let prices =[12, 32, 10, 55, 100, 102]; 

    var taxes = prices.map(add_tax);  //return the array

    function add_tax(value, index, array)
    {
        value += value*0.07;
        return value;
    }
    console.log("prices: "+prices);

    console.log("taxes: "+taxes);
</script>

Output 

prices: 12,32,10,55,100,102
taxes: 12.84,34.24,10.7,58.85,107,109.14

Array filter method

As the name suggests the filter() method is used to filter out the elements from the array that does not pass the test. The filter() method filter the array based on the passed function. And if the function returns true the filter function keep the array value else it omits the value. The filter method does not make any changes in the actual array instead it creates a copy of the array.

Syntax 

filter_array = array_name.filter(function_name)

Example 

<script>
    let ages = [12, 16, 17, 19, 20, 14, 25];
    let only_adult = ages.filter(is_adult);
    function is_adult(value, index, array)
    {
        if(value >=18)
        {
            return true;
        }
        else
        {
            return false;
        }
    }
    console.log("All ages: "+ages);

    console.log("Only adults: "+only_adult);
</script>
Output 
All ages: 12,16,17,19,20,14,25
Only adults: 19,20,25

Array reduce() method

The reduce() method is used to simplify the complete array into a single value. Similar to all the methods we discussed so far in this tutorial reduce also apply the function on every array element and return a single value result. It does not change the actual array or reduce it instead it creates a copy of the array and reduces it to the specified function.

Syntax 

new_value  = array_name.reduce(function_name, initial_value)

The reduce function can accept two arguments, the first must be the function, and the second is optional which represents the initial value for the first execution of the reduce method.

Example 

<script>
    let prices =[12, 32, 10, 55, 100, 102]; 
    let total_bill = prices.reduce(sum, 0);

    function sum(pre_value, cur_value, index, array)
    {
        return pre_value+cur_value;
    }
    console.log("prices: "+prices);
    console.log("total bill: "+total_bill);
</script>

Output 

prices: 12,32,10,55,100,102
total bill: 311

Behind the code In the above example, we have used the reduce() method to sum up all the elements present in the prices array. prices.reduce(sum, 0); statement specifies that call the sum() function for every element of prices with initial value 0 . In the sum(pre_value, cur_value, index, array) function we have specified 4 arguments, which automatically get assigned when called by reduce() method.

  • pre_value argument specifies the previous value of the array.
  • The cur_value argument specifies the current value of the array.
  • The index argument Specifies the index number of the current value.
  • The array represents the prices array itself.

Similar to the reduce() method we have reduceRight() method which reduces the array element into a single value from right to left, whereas the reduce() method reads the array from left to right.

Array every() method

The every() method is used to check if all the elements of the array pass the test based on a function. And it returns true if all the elements pass the test else it returns false .

Syntax 

array_name.every(function_name)

Example 

<script>

    let ages = [12, 16, 17, 19, 20, 14, 25];
    let only_adult = ages.every(is_adult);
    let only_over10 = ages.every(is_over10);

    function is_adult(value, index, array)
    {
        if(value > 18)
        {
            return true;
        }
    }
    function is_over10(value, index, array)
    {
        if(value > 10)
        {
            return true;
        }
    }
    console.log("All ages: "+ages);
    console.log("Are all adults? "+only_adult);
    console.log("Are all over 10? "+only_over10);
</script>

Output 

All ages: 12,16,17,19,20,14,25
Are all adults? false
Are all over 10? true

Array some() method

The some() method is used to check if any of the array elements pass the test. It returns true if any one of the arrays passes the function test, else it returns false .

Syntax 

array_name.some(function_name)

Example 

<script>
    let ages = [12, 16, 17, 19, 20, 14, 25];
    let any_adult = ages.some(is_adult);
    function is_adult(value, index, array)
    {
        if(value > 18)
        {
            return true;
        }
    }
    console.log("All ages: "+ages);
    console.log("Any adults? "+any_adult);
</script>
Output 
All ages: 12,16,17,19,20,14,25
Any adults? true

Summary

  • The forEach() method calls the specified function for every element of the array.
  • The map() method also calls the specified function for every element of the array but it returns a new array.
  • The filter() method is used to filter the array elements based on the function test.
  • The reduce() method is used to wrap up the complete array into a single value.
  • The every() method is used to check if all the elements of the array pass the test.
  • The some() method is used to check if a single element of the array can pass the test.
Previous Tutorial Next Tutorial